import  { ReactElement, useEffect } from 'react'
import style from './ArticleList.module.scss'
import DetectTitle from '../DetectTitle/DetectTitle'
import useNavArticle from '@/hooks/useNavArticle'
import { useAppDispatch, useAppSelector } from '@/hooks/useReduxHook'
import { getTopArticleList } from '@/store/articleSlice'
import LazyLoad from 'react-lazy-load'
export default function ArticleList():ReactElement {
    const { goToArticleInfo } = useNavArticle()
    const dispactch = useAppDispatch()
    const topArticleList = useAppSelector((state)=> state.article.topArticleList)
    useEffect(()=>{
        dispactch(getTopArticleList())
    },[dispactch])

  return (
    <div className={style['recent-article__container']}>
      <DetectTitle/>
      {topArticleList.map((article,index)=>
      <div 
      onClick={()=>goToArticleInfo(article)}
      className={`${style['recent-article__item']} shadow__box ${index%2===0?'my-animation-slide-bottom':'my-animation-slide-top'} `} 
      key={article.id}>
        {/* 封面 */}
        <div className={`${style['recent-article__cover']} ${index % 2 !== 0 ? style['left-img']:style['right-img']}`}>
        <LazyLoad height={'100%'} width={'100%'}>
        <img className={style['cover-img']} src={article.thumbnail} />
        </LazyLoad>
        
        </div>
         {/* 内容 */}
        <div 
         className={`${style['recent-article__content']} ${index % 2 === 0 ?style['left-img']:style['right-img']}`}>
           {/* 时间 */}
            <div className={style['recent-article__post-meta']}>
          <i className={`iconfont icon-shengchanjihua ${style['time-icon']}`}></i>
          发布于 { article.createTime }
        </div>
        <h3>{article.title }</h3>
        {/* 信息 */}
        <div className={style['recent-article__post-meta']} style={{marginBottom: '15px'}}>
          <span>
            <i className={`iconfont icon-ego-hot ${style['hot-icon']}`}></i>
            { article.viewCount || 0 } 热度
          </span>
          <span>
            <i className={`iconfont icon-pinglun1 ${style['comment-icon']}`}></i>
            { article.commentCount || 0 } 条评论
          </span>
          <span>
            <i className={`iconfont icon-dianzan ${style['star-icon']}`}></i>
            { article.star || 0 } 点赞
          </span>
        </div>
          {/* 内容 */}
        <div className={style['recent-article__desc']}>
          {article.summary || '' }
        </div>
        {/* 分类标签 */}
        <div className={style['recent-article__sort-label']}>
            {
               article.categoryName&& <span style={{marginRight: '12px'}}>
                <i className={`iconfont icon-leimupinleifenleileibie2 ${style['category-icon']}`}></i>
                { article.categoryName || '' }
                </span>
            }
           {
             article.tagList?.length&&<span>
                 <i className={`iconfont icon-biaoqian1 ${style['label-icon']}`}></i>
            {
              article.tagList
                ? article.tagList
                    .slice(0, 2)
                    .map(item => item.tagName)
                    .join(' ')
                : ''
            }
             </span>
           }
        </div>
        </div>
      </div>)}
    </div>
  )
}
